<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span>近七日交易趋势</span>
        <div class="header-right">
          <el-radio-group v-model="chartType" size="small">
            <el-radio-button label="amount">成交额</el-radio-button>
            <el-radio-button label="count">成交量</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </template>
    <div ref="chartRef" style="height: 300px;"></div>
  </el-card>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'TrendChart',
  setup() {
    const chartRef = ref(null)
    const chartType = ref('amount')
    let chart = null

    // 模拟数据
    const mockData = {
      dates: ['2025-04-06', '2025-04-07', '2025-04-08', '2025-04-09', '2025-04-10', '2025-04-11', '2025-04-12'],
      amount: [0, 100, 200, 300, 400, 500, 600],
      count: [0, 10, 20, 30, 40, 50, 60]
    }

    const initChart = () => {
      if (!chartRef.value) return
      
      chart = echarts.init(chartRef.value)
      updateChart()
    }

    const updateChart = () => {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#409EFF',
              width: 1,
              type: 'dashed'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: mockData.dates,
          axisLine: {
            lineStyle: {
              color: '#DCDFE6'
            }
          },
          axisLabel: {
            color: '#606266'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#EBEEF5',
              type: 'dashed'
            }
          },
          axisLabel: {
            color: '#606266',
            formatter: chartType.value === 'amount' ? '{value}元' : '{value}'
          }
        },
        series: [
          {
            name: chartType.value === 'amount' ? '成交额' : '成交量',
            type: 'line',
            smooth: true,
            data: chartType.value === 'amount' ? mockData.amount : mockData.count,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#409EFF'
            },
            lineStyle: {
              color: '#409EFF',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(64,158,255,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgba(64,158,255,0)'
                }
              ])
            }
          }
        ]
      }

      chart.setOption(option)
    }

    // 监听图表类型变化
    watch(chartType, () => {
      updateChart()
    })

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      chart && chart.resize()
    })

    onMounted(() => {
      initChart()
    })

    return {
      chartRef,
      chartType
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-right {
  margin-right: 16px;
}
</style> 